<ion-header>

  <ion-navbar color="dark">
    <ion-title class="center w80">发布运动</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding-right="16px" padding-left="16px">
  <ion-list>
    <ion-item>
      <ion-note item-left=""><a (click)="test()" style="width:30px;height: 30px;display: block;"><img
        src="assets/images/sportType/{{sportTypeImg}}.jpg" style="width: 100%;height: 100%"></a></ion-note>
      <ion-input placeholder="请输入活动主题" [(ngModel)]="sportModel.pubSportTitle" (ionFocus)="a='hidden'"></ion-input>
    </ion-item>

    <div *ngIf="a=='show'"
         style="width: 87%;height:150px;background-color: white;position: absolute;z-index: 9999;left: 31px">
      <div class="selectThem" (click)="selectSprotType(1,'run')">
        <img src="assets/images/sportType/run.jpg">
        <a>跑步</a>
      </div>
      <div class="selectThem">
        <img src="assets/images/sportType/swim.jpg" (click)="selectSprotType(2,'swim')">
        <a>游泳</a>
      </div>
      <div class="selectThem" (click)="selectSprotType(3,'climb')">
        <img src="assets/images/sportType/climb.jpg">
        <a>爬山</a>
      </div>
      <div class="selectThem" (click)="selectSprotType(4,'walk')">
        <img src="assets/images/sportType/walk.jpg">
        <a>散步</a>
      </div>


      <div class="selectThem" (click)="selectSprotType(5,'ball')">
        <img src="assets/images/sportType/ball.jpg">
        <a>球类</a>
      </div>
      <div class="selectThem" (click)="selectSprotType(6,'drive')">
        <img src="assets/images/sportType/drive.jpg">
        <a>自驾</a>
      </div>
      <div class="selectThem" (click)="selectSprotType(7,'ride')">
        <img src="assets/images/sportType/ride.jpg">
        <a>骑行</a>
      </div>
      <div class="selectThem" (click)="selectSprotType(8,'other')">
        <img src="assets/images/sportType/other.jpg">
        <a>其它</a>
      </div>

    </div>

    <ion-item style="border: none">
      <label item-left class="label label-md"><img src="assets/images/sportType/starttime.jpg"
                                                   style="width: 20px;height: 20px"></label>
      <ion-datetime displayFormat="YYYY/MM/DD HH:mm" cancelText="取消" doneText="确定"
                    [(ngModel)]="sportModel.sportStartDatetime" [min]="min" [max]="max">
      </ion-datetime>
    </ion-item>

    <ion-item>
      <label item-left class="label label-md"><img src="assets/images/sportType/endtime.jpg"
                                                   style="width: 20px;height: 20px"></label>
      <ion-datetime displayFormat="YYYY/MM/DD HH:mm" cancelText="取消" doneText="确定"
                    [(ngModel)]="sportModel.sportEndDatetime" [min]="min" [max]="max">
      </ion-datetime>
    </ion-item>

    <ion-item>
      <label item-left class="label label-md"><img src="assets/images/sportType/location.png"
                                                   style="width: 20px;height: 20px"></label>
      <input id="tipinput" class="text-input text-input-md place"/>
    </ion-item>
  </ion-list>
  <div style="width: 110%;height: 122px;margin-left:-16px;background-color: #dadada">
    <div class="moreTitle">-----------------------更多设置------------------------</div>
    <div class="select_option" style="margin-left: 5px" (click)="pushPage('phone')">
      <div style="width: 100%"><img src="assets/images/sportType/phone.jpg"></div>
      <a>联系方式</a><br/>
      <span class="info" *ngIf="this.storageService.read('phone')!=null &&this.storageService.read('phone').phone!=''">{{this.storageService.read('phone').phone}}</span>
      <span *ngIf="this.storageService.read('phone')==null ||this.storageService.read('phone').phone==''">无</span>
      <!--<span *ngIf="sportModel.phone==undefined">无</span>-->
    </div>
    <div class="select_option" (click)="pushPage('pubSportDes')">
      <div style="width: 100%"><img src="assets/images/sportType/des.jpg"></div>
      <a>活动描述</a><br/>
      <span class="info"
            *ngIf="this.storageService.read('pubSportDes')!=null&&this.storageService.read('pubSportDes').pubSportDes!=''">有</span>
      <span
        *ngIf="this.storageService.read('pubSportDes')==null||this.storageService.read('pubSportDes').pubSportDes==''">无</span>
    </div>
    <div class="select_option" (click)="pushPage('sportAllowJoinPersonNum')">
      <div style="width: 100%"><img src="assets/images/sportType/person_num.jpg"></div>
      <a>活动人数</a><br/>
      <span
        *ngIf="this.storageService.read('sportAllowJoinPersonNum')==null||this.storageService.read('sportAllowJoinPersonNum').sportAllowJoinPersonNum==''">无限制</span>
      <span class="info"
            *ngIf="this.storageService.read('sportAllowJoinPersonNum')!=null&&this.storageService.read('sportAllowJoinPersonNum').sportAllowJoinPersonNum!=''">{{this.storageService.read('sportAllowJoinPersonNum').sportAllowJoinPersonNum}}</span>
    </div>


  </div>
  <div padding text-center class="paddingTop">
    <button ion-button color="dark" block (click)="pubSport()">发布</button>
  </div>
</ion-content>


